<template>
	<view>
		<view class="un-recordDetail-tou">
			<view class="un-recordDetail-tou-text">
				<text>服务单号 ：</text>
				<text>{{recordId}}</text>
			</view>
			<view class="un-recordDetail-tou-text">
				<text>申请时间 ：</text>
				<text>2017-05-01 16:00</text>
			</view>
		</view>
		
		<view class="un-recordDetail-plan">
			<view class="un-recordDetail-plan-text">
				<text @tap="BasicsSteps">审核进度 ：</text>
				<text class="un-recordDetail-plan-text2">您的服务单财务已退款，请您注意查收</text>
				<text class="iconfont icon-youjiantou un-icon" @click="navToAuditPlan(recordId)"></text>
			</view>
			
			<view class="un-recordDetail-plan-trace">
				<view v-if="basics===4">
					<text class="iconfont icon-duihuakuang un-icon1"></text>
					<text class="un-recordDetail-plan-trace-text">已完成</text>
				</view>
				
				<view class="cu-steps">
					<view class="cu-item" :class="index>basics?'':'text-green'" v-for="(item,index) in basicsList" :key="index">
						<text :class="index>basics?'cuIcon-title':'cuIcon-roundcheckfill'"></text> 
						<text>{{item.name}}</text> 
						<view class="cu-time">
							<text >{{item.time}}</text>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="un-recordDetail-wen">
			<view class="un-recordDetail-wen-title">
				问题描述
			</view>
			<view class="un-recordDetail-wen-detail">
				拿来看也没看就洗了，发现有些不对劲，吊牌都没有，洗的时候还有泡沫，细看领口有一处缝补的痕迹，虽然是特价买的但是还是感觉很不爽。
			</view>
		</view>
		<view class="un-recordDetail-wen">
			<view class="un-recordDetail-wen-title">审核留言</view>
			<view class="un-recordDetail-wen-detail">亲爱的客户，很抱歉您的商品出现这样的问题。请准备好商品全套（商品、附件、发票原件、包装）按以下地址寄往亿拼惠售后部，不支持到付及平邮。如收到商品后情况属实，我们会尽快为您办理。感谢您对的支持。（注：电子发票及换货发票无需退回）。提示：为避免数据遗失或泄露，请您提前做好数据备份，亿拼惠将不承担相应责任。</view>
			<view class="un-recordDetail-wen-T">
				<text class="un-recordDetail-wen-T1">· 收货地址 ：</text>
				<text>广东省深圳市亿拼惠售后服务部</text>
			</view>
			<view class="un-recordDetail-wen-T">
				<text class="un-recordDetail-wen-T1">· 联系姓名 ：</text>
				<text>亿拼惠</text>
			</view>
			<view class="un-recordDetail-wen-T">
				<text class="un-recordDetail-wen-T1">· 邮政编码 ：</text>
				<text>518000</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordId:'198014266',
				basicsList: [{
					name: '提交申请',
					time:'2017-05-10 01:10:40'
				}, {
					name: '申请审核',
					time:'2017-05-10 01:10:40'
				}, {
					name: '售后收货',
					time:'2017-05-10 01:10:40'
				}, {
					name: '进行退款',
					time:'2017-05-10 01:10:40'
				}, {
					name: '处理完成',
					time:'2017-05-10 01:10:40'
				},],
				basics: 0,
			}
		},
		onLoad(options) {
			this.recordId=options.recordId;
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			//跳转审核季度
			navToAuditPlan(recordId){
				uni.navigateTo({
					url:'/pages/aftersale/auditPlan/auditPlan?recordId='+recordId
				})
			},
			//下一步
			BasicsSteps() {
				this.basics= this.basics == this.basicsList.length - 1 ? 0 : this.basics + 1				
			},
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
		padding-bottom:100upx;
	}
	.un-recordDetail-tou{
		background-color: #ffffff;
		color: #999999;
		font-size:28upx;
		padding: 40upx 40upx;
		line-height: 55upx;
		border-bottom: #F2F2F2 solid 1upx;
		border-top: #F2F2F2 solid 1upx;
	}
	.un-recordDetail-plan{
		margin-top: 20upx;
		background-color: #ffffff;
		.un-recordDetail-plan-text{
			font-size: 28upx;
			padding: 30upx 40upx;
			color: #999999;
			border: #F2F2F2 solid 1upx;
			.un-recordDetail-plan-text2{
				margin-left: 10upx;
				font-size: 25upx;
			}
			.un-icon{
				margin-left: 65upx;
			}
		}
		.un-recordDetail-plan-trace{
			font-size: 25upx;
			color: #ccc;
			position: relative;
			font-weight: 500;
			padding: 140upx 20upx 100upx;
			.un-icon1{
				color: #E02E24;
				position: absolute;
				z-index: 1;
				font-size: 100upx;
				left: 590upx;
				top: 30upx;
			}
			.un-recordDetail-plan-trace-text{
				color: #FFFFFF;
				position: absolute;
				z-index: 2;
				font-size: 25upx;
				left: 620upx;
				top: 60upx;
				font-weight: 500;
			}
		}
		.cu-time{color: #CCC;padding-top:5upx;}
		.text-green{ color: #E02E24; }
		.cuIcon-roundcheckfill:before { font-family: 'iconfont'; content: "\e6d3"; font-weight: 900;font-size: 60upx;}
		.cuIcon-title:before { font-family: 'iconfont'; content: "\e6d3";font-size: 60upx; }
		.cu-steps { display: flex; }
		.cu-steps .cu-item { flex: 1; text-align: center; position: relative; min-width: 100upx; }
		.cu-steps .cu-item [class*="cuIcon-"]{ display: block; font-size: 40upx; line-height: 80upx; }
		.cu-steps .cu-item::before, .cu-steps .cu-item::after { content: ""; display: block; position: absolute; height: 0px; width: calc(100% - 80upx); border-bottom: 1px solid #ccc; left: calc(0px - (100% - 80upx) / 2); top: 40upx; z-index: 0; }
		.cu-steps .cu-item::after { border-bottom: 1px solid currentColor; width: 0px; transition: all 0.3s ease-in-out 0s; }
		.cu-steps .cu-item[class*="text-"]::after { width: calc(100% - 80upx); color: currentColor; }
		.cu-steps .cu-item:first-child::before, .cu-steps .cu-item:first-child::after { display: none; }
	}
	.un-recordDetail-wen{
		background-color: #ffffff;
		padding: 0upx 40upx;
		color: #999999;
		font-size: 25upx;
		line-height: 45upx;
		margin-top: 20upx;
		border-bottom: #F2F2F2 solid 1upx;
		border-top: #F2F2F2 solid 1upx;
		.un-recordDetail-wen-title{
			font-size: 28upx;
			border-bottom: #F2F2F2 solid 1upx;
			padding: 20upx 0upx;
		}
		.un-recordDetail-wen-detail{
			font-size: 25upx;
			padding: 30upx 0upx 50upx;
		}
		.un-recordDetail-wen-T1{
			font-weight: 700;
		}
	}
</style>
